'use client';
import { useEffect, useState } from 'react';
import { createClient } from '@/utils/supabase/client';
import { QuizProvider } from '../QuizProvider';
import { QuizHeader } from '../components/QuizHeader';
import { QuizContent } from '../components/QuizContent';
import { useRouter } from 'next/navigation';

// Define Quiz type for better type safety
export type Quiz = {
  id: number;
  name: string | null;
  date: string | null;
  url: string | null;
  created_at: string;
}

export default function QuizDetail({ params }: { params: { id: string } }) {
  const quizId = parseInt(params.id);
  const [selectedQuiz, setSelectedQuiz] = useState<Quiz | null>(null);
  const supabase = createClient();
  const router = useRouter();

  useEffect(() => {
    const fetchQuiz = async () => {
      const { data, error } = await supabase
        .from('quizes')
        .select('*')
        .eq('id', quizId)
        .single();

      if (error) {
        console.error('Error fetching quiz:', error);
        router.push('/admin/quiz'); // Redirect to quiz list on error
        return;
      }

      // Ensure the data has all required fields
      const quiz: Quiz = {
        id: data.id,
        name: data.name,
        date: data.date,
        url: (data as any).url || null,
        created_at: data.created_at
      };

      setSelectedQuiz(quiz);
    };

    fetchQuiz();
  }, [quizId, router, supabase]);

  const handleQuizUpdate = (updatedQuiz: Partial<Quiz>) => {
    if (selectedQuiz) {
      setSelectedQuiz({ ...selectedQuiz, ...updatedQuiz });
    }
  };

  const handleBack = () => {
    router.push('/admin/quiz');
  };

  if (!selectedQuiz) {
    return <div className="p-6">Loading...</div>;
  }

  return (
    <QuizProvider quizId={quizId}>
      <QuizHeader 
        quiz={selectedQuiz} 
        onBack={handleBack}
        onQuizUpdate={handleQuizUpdate}
      />
      <div className="p-6"></div>
      <QuizContent quiz={selectedQuiz} />
    </QuizProvider>
  );
}